<template>
  <div class="task-view">
    <el-form :model="queryParam" inline size="small">
      <el-form-item label="任务标题">
        <el-input v-model="queryParam.taskTitle" placeholder="请输入任务标题" />
      </el-form-item>
      <el-form-item label="交办领导">
        <LeaderSelect
          v-model="queryParam.assignLeader"
          assignLeaders
          placeholder="请选择交办领导"
        />
      </el-form-item>
      <el-form-item label="交办类型">
        <DictionarySelect
          parent-dictionary-value="taskType"
          v-model="queryParam.assignType"
          placeholder="请选择交办类型"
        />
      </el-form-item>
      <el-form-item label="审批状态">
        <TaskSelect v-model="queryParam.taskStatus" />
      </el-form-item>
      <el-form-item label="交办时间">
        <el-date-picker
          v-model="queryParam.assignTime"
          type="date"
          format="YYYY年MM月DD日"
          value-format="YYYY-MM-DD 00:00:00"
          placeholder="请选择交办时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="getInfo" icon="Search">
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="warning"
          @click="reset"
          icon="RefreshRight"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="flex justify-between items-center mb-4">
      <div>
        <el-button
          type="primary"
          size="small"
          icon="Plus"
          @click="taskDialog.show()"
        >
          登记
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="Delete"
          :disabled="selectedData.length === 0"
          @click="handleDelete()"
        >
          删除
        </el-button>
      </div>
    </div>
    <Table
      :data="tableData"
      :selectable="selectable"
      @selection-change="handleSelectionChange"
    >
      <TableColumn
        label="任务标题"
        :min-width="getColumnWidth(tableData, 'taskTitle', 100, 34)"
      >
        <template #default="{ row }">
          <el-button link type="primary" @click="taskDialog.show(row)">
            {{ row.taskTitle }}
          </el-button>
        </template>
      </TableColumn>
      <TableColumn label="交办领导" :min-width="120">
        <template #default="{ row }">
          <LeaderShow :leader-id="row.assignLeader" />
        </template>
      </TableColumn>
      <TableColumn
        label="交办类型"
        :min-width="
          taskTypeGetDictionaryInfo.getColumnDictionaryWidth(
            tableData,
            'assignType',
            100,
          )
        "
      >
        <template #default="{ row }">
          <DictionaryShow
            parent-dictionary-value="taskType"
            :value="row.assignType"
          />
        </template>
      </TableColumn>
      <TableColumn label="交办时间" :min-width="130">
        <template #default="{ row }">
          {{ formatDateStr(row.assignTime, 'YYYY年MM月DD日') }}
        </template>
      </TableColumn>
      <TableColumn label="审批状态" :min-width="90">
        <template #default="{ row }">
          <TaskShow :status="row.taskStatus" />
        </template>
      </TableColumn>
      <TableColumn label="操作" :width="80">
        <template #default="{ row }">
          <el-button
            type="danger"
            size="small"
            :disabled="row.taskStatus !== 1"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </TableColumn>
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
    <TaskDialog ref="taskDialog" @update="getInfo" />
  </div>
</template>
<script setup lang="ts">
import Table from '@/components/table/Table.vue'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import Pagination, { PageType } from '@/components/Pagination.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import { getColumnWidth } from '@/plugins/util'
import TaskDialog from '@/views/mission/task/TaskDialog.vue'
import LeaderShow from '@/components/leader/LeaderShow.vue'
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import { PageParam } from '@/type'
import { deleteTask, getTaskByPage } from '@/api/mission/task'
import { ElMessageBox } from 'element-plus'
import TaskShow from '@/components/statusShow/task/TaskShow.vue'
import LeaderSelect from '@/components/leader/LeaderSelect.vue'
import DictionarySelect from '@/components/dictionary/DictionarySelect.vue'
import TaskSelect from '@/components/statusShow/task/TaskSelect.vue'
import { useGetDictionaryInfo } from '@/hooks/useGetDictionaryInfo'
import { formatDateStr } from '@/plugins/date'
import { Message } from '@/hooks/message'

const taskDialog = useTemplateRef<InstanceType<typeof TaskDialog>>('taskDialog')
const taskTypeGetDictionaryInfo = useGetDictionaryInfo('taskType')

const queryParam = reactive({
  taskTitle: null,
  assignLeader: null,
  assignType: null,
  taskStatus: null,
  assignTime: null,
})
const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})
const selectedData = ref([])
const tableData = ref([])

function selectable(row: any) {
  return row.taskStatus === 1
}

function handleSelectionChange(rows: []) {
  selectedData.value = rows
}

function reset() {
  Object.assign(queryParam, {
    taskTitle: null,
    assignLeader: null,
    assignType: null,
    taskStatus: null,
    assignTime: null,
  })
  getInfo()
}

async function getInfo() {
  const postData: PageParam = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: queryParam,
  }

  const { data } = await getTaskByPage(postData)
  if (data.status === 200) {
    page.currentPage = data.data.currentPage
    page.pageSize = data.data.pageSize
    page.total = data.data.totalCount
    tableData.value = data.data.data
  }
}

function handleDelete(row?: any) {
  let text = ''
  if (row && row.taskTitle) {
    text = `确定要删除【${row.taskTitle}】吗？`
  } else if (selectedData.value.length !== 0) {
    text = `确定要删除 ${selectedData.value.length} 条数据吗？`
  }
  if (text) {
    ElMessageBox.confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      let ids: string
      if (row) {
        ids = '' + row.id
      } else {
        ids = selectedData.value
          .map((item) => {
            return item.id
          })
          .join(',')
      }
      const { data } = await deleteTask(ids)
      if (data.status === 200) {
        Message({
          message: data.message || '删除成功',
          type: 'success',
        })
        await getInfo()
      }
    })
  }
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss"></style>
